<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>这是首页</h2>
  <p>这是一段文字</p>
  <!-- 像这种列表这样会变的数据，是不能写死的 -->
  <!-- 需要调用后端的接口来获取数据 -->
  <ul></ul>
  <div></div>

  <!-- 前端页面拿后端数据 -->
  <script>
    // h5新增的一个调用接口的方法
    // fetch会返回一个promise，所以可以直接使用then方法

    // Access-Control-Allow-Origin: 表示跨域了
    // 跨域是浏览器的同源策略引起的
    // 浏览器默认只允许拿到相同协议，相同域名，相同端口号的接口数据
    // 可以使用CORS(是一种的后端的方式)的方式来解决
    fetch("http://127.0.0.1:3000/data").then(response => response.json()).then(res =>{
      // console.log(res.a);
      // document.querySelector("div").innerHTML = res.a;
      // console.log(res);
      if (res.success) {
        let str = "";
        res.data.forEach(item => {
          str += `<li>${item.title}</li>`
        })
        document.querySelector("ul").innerHTML = str;
      }
    })
  </script>
</body>
</html>